<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用结构伪类选择器</title>
		<style>
			/* ul的第一个子元素 */
			ul li:first-child{
				background: red;
			}
			body p:first-child{
				background: red;
			}
			/* ul的最后一个子元素 */
			ul li:last-child{
				background: green;
			}
			/* body下面的第二个p元素 */
			/* body p:nth-child(6){
				background: yellow; */
			}
			ul li:nth-child(2){
				background: yellow;
			}
			body span:nth-child(even){
				background: purple;
			}
			/* body p:nth-child(odd){
				background: blue; */
			}
			/* 选择到父级里的第一个子元素 */
			p:first-of-type{
				background: red;
			}
			p:last-of-type{
				background: red;
			}
			p:nth-of-type(3){
				background: blue;
			}
		</style>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<span>aa</span>
		<span>bb</span>
		<p>p4</p>
		<ul>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ul>
	</body>
</html>
